<template>
<div class="check">
    <div class="isSelAll" v-if="$store.state.all_selected">
        <i class="iconfont icon-xuanze"></i> 
        <span class="cancelSelAll" @touchend="selectAll()">取消全选</span>
    </div>
    <div class="isSelAll" v-else>
        <i class="iconfont icon-yuancircle46" ></i>
        <span class="selAll" @touchend="selectAll()">全选</span>
    </div>
    <div class="totlePrice">共计：{{$store.getters.allPrice}} 元</div>
    <div class="pay">结算({{$store.getters.payLength}})</div>
</div>
</template>
<style lang="scss">
@import '@/assets/base.scss';
.check {
    height: 50px;
    line-height: 50px;
    padding: 5px 15px ;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: #fff;
    border-top: 1px solid #ccc;
    .isSelAll {
        flex: 1;
        .icon-xuanze,
        .icon-yuancircle46 {
            font-size: 26px;
            vertical-align: sub;
        }
        .cancelSelAll,
        .selAll {
            padding-left: 8px;
            font-size: 18px;
            color: $navColor;
            }
    }
    .totlePrice {
        font-size: 20px;
        margin-right: 10px;
        margin-top: 1px;
    }
    .pay {
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #f60;
        color: #fff;
        padding: 0px 10px;
        border-radius: 20px;
        font-size: 17px;
        margin-top: 5px;
    }
}
</style>
<script>
import {mapMutations} from 'vuex';
export default {
    methods: {
        ...mapMutations(['selectAll'])
    }
}
</script>
